<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="userList"
            style="width: 100%"
        
            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column prop="num" label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="账号"
              prop="mobile"
              width="120"
              align="center"
            />
            <el-table-column
              prop="type"
              label="类型"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <span>
                  {{ typeTxtArr[scope.row.type] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="姓名"
              min-width="60"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="nickname"
              label="微信昵称"
              min-width="100"
              align="center"
            />
            <el-table-column
              prop="houseViewNum"
              label="可看房源"
              align="center"
              min-width="80"
            >
              <!--   @click="toHouse(scope.row)" house-num-->
              <template slot-scope="scope">
                <span :class="scope.row.houseViewNum > 0 ? '' : ''">{{
                  scope.row.houseViewNum
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              min-width="100"
            >
              <template slot-scope="scope">
                <span :class="scope.row.status === 0 ? 'red' : ''">{{
                  statusArr[scope.row.status]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createdTime"
              label="注册时间"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ formatHours(scope.row.createdTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="loginTime"
              label="最近登录时间"
              align="center"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ formatHours(scope.row.loginTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="remark"
              label="备注"
              align="center"
              min-width="180"
            />
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="disableUser(scope.row)"
                  >{{ statusRow[scope.row.status] }}</el-button
                >
                <el-button type="text" size="small" @click="del(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!---->
          <el-pagination
            background
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal :disabled="disabled" :obj="objMo" @close="close" @save="save">
      <div class="mpdalBody">
        <el-form
          ref="form"
          :model="editList"
          label-width="85px"
          class="formDiv"
          :rules="rules"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="11" :lg="11" class="">
              <el-form-item prop="mobile" label="账号:">
                <el-input
                  v-model="editList.mobile"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="type" label="类型:">
                <el-select
                  v-model="editList.type"
                  placeholder="请选择类型"
                  @change="owner"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item label="姓名:" label-width="82px">
                <el-select
                  v-if="!isInput"
                  v-model="editList.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(it, i) in userName"
                    :key="i"
                    :label="it.name + '/' + it.mobile"
                    :value="it.name"
                  />
                </el-select>
                <el-input
                  v-else-if="isInput"
                  v-model="editList.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="22" :lg="22" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="editList.remark"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                  show-word-limit
                  :maxlength="200"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </myModal>
    <!---->
    <myModal :obj="objFour" @save="determine">
      <div class="mpdalBody">
        <h4>确定删除吗？</h4>
      </div>
    </myModal>
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import { getAccountList, usersDel, modifyUsers } from "@/api/account";
import { formatHours } from "@/utils/common";
import { page } from "@/api/manager";

export default {
  components: { myModal },
  props: {
    obj: {
      type: Object,
    },
  },
  data() {
    return {
      disabled: true,
      total: 10,
      formatHours,
      currentPage4: 1,
      editList: {
        name: "",
        remark: "",
        type: 1,
        mobile: "",
        managerId: null,
      },
      userList: [],
      statusArr: ["已禁用", "有效"],
      statusRow: ["解禁", "禁用"],
      typeTxtArr: ["普通", "业主", "渠道"],
      listQuery: {
        page: 1,
        limit: 10,
        status: null,
        type: null,
        createTime: null,
        content: null,
      },
      objMo: {
        show: false,
        title: "编辑用户账号",
        width: "647px",
      },
      objFour: {
        show: false,
        title: "用户账号",
        width: "647px",
      },
      options: [
        {
          label: "普通",
          value: 0,
        },
        {
          label: "业主",
          value: 1,
        },
        {
          label: "渠道",
          value: 2,
        },
      ],
      isInput: false,
      userName: [],
      required: "",
      textarea: "",
      id: "",
      user: {
        page: 1,
        limit: 100,
        type: 0,
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入正确手机号",
            trigger: "blur",
            pattern: /^1[3-9][0-9]{9}$/,
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    editList: {
      handler(newVal, oldVal) {
        var reg = /^1[3-9][0-9]{9}$/;
        var r = newVal.mobile.toString().match(reg);
        if (r && newVal.mobile) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
  },
  created() {
    this.accountList();
  },
  async mounted() {
    this.$parent.$on("searchData", (val) => {
      this.listQuery = val;
      this.accountList();
    });
    this.$parent.$on("addData", () => {
      this.accountList();
    });

    var res = await page(this.user);
    this.userName = res.data.records;
  },
  methods: {
    async accountList() {
      var res = await getAccountList(this.listQuery);
      if (res.code === 200) {
        this.userList = res.data.records;
        this.total = res.data.total;
      }
    },
    toHouse(row) {
      this.$router.push({ path: "/house/page", query: { id: row.id } });
    },
    del(id) {
      this.id = id;
      this.objFour.show = true;
    },
    async determine() {
      await usersDel(this.id);
      this.accountList();
      this.objFour.show = false;
    },
    owner(val) {
      if (val === 1) {
        this.isInput = false;
      } else {
        this.isInput = true;
      }
      this.editList.name = "";
    },
    async disableUser(row) {
      if (row.status === 1) {
        row.status = 0;
      } else {
        row.status = 1;
      }
      await modifyUsers(row);
    },
    async save() {
      const { name } = this.editList;
      const idItem = this.userName.find((item) => item.name == name);
      await modifyUsers({ ...this.editList, managerId: idItem.id });
      this.accountList();
      this.objMo.show = false;
    },
    handleClick(row) {
      this.editList = Object.assign({}, row);
      this.objMo.show = true;
      if (this.editList.type === 1) {
        this.isInput = false;
      } else {
        this.isInput = true;
      }
    },
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.accountList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.accountList();
    },
    close() {
      this.objMo.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.red {
  color: red !important;
}
.house-num {
  color: #5ac6b7;
  cursor: pointer;
}
</style>

